import React, { PureComponent } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import showHide from '@wpt/showHide';
import S from './index.m.less';

@showHide
export default class broadCast extends PureComponent {
    static defaultProps = {
        list: [],
        className: '',
        speed: 2500, // 滚动速度
        onClickItem: () => {},
        renderItem: () => {},
        onScrollEnd: undefined,
    };

    static propTypes = {
        list: PropTypes.array,
        className: PropTypes.string,
        speed: PropTypes.number,
        onClickItem: PropTypes.func,
        renderItem: PropTypes.func,
        onScrollEnd: PropTypes.func,
    };

    componentDidMount() {
        const { list } = this.props;
        if (list.length > 1) {
            this.showScroll();
        }
    }

    componentWillUnmount() {
        this.clearAllInter();
    }

    onPageShow() {
        const { list } = this.props;
        this.interVal = [];
        if (list.length > 1) {
            this.showScroll();
        }
    }

    onPageHide() {
        this.clearAllInter();
    }

    interVal = null;

    clearAllInter = () => {
        window.clearInterval(this.interVal);
    };

    // 展示轮播
    showScroll = () => {
        const { list, speed, onScrollEnd } = this.props;
        const that = this;
        if (typeof onScrollEnd === 'function') {
            setTimeout(() => {
                onScrollEnd();
                this.clearAllInter();
                if (list.length > 1) {
                    this.showScroll();
                }
            }, speed * (list.length - 1) + 1000);
        }
        // 设定初始top
        $(this.scroll)
            .find('li')
            .each(function (i) {
                const height = $(this).height();
                $(this).css({
                    top: `${i * height}px`,
                });
            });
        this.interVal = window.setInterval(() => {
            // 极端情况下 存在top错位 页面上没有 top == 0 的元素，这里用一个变量检测和修复
            let wrongTop = true;
            // 这里不能使用箭头函数，会改变this指向
            $(this.scroll)
                .find('li')
                .each(function (i) {
                    const height = $(this).height();
                    let top = $(this).position().top;
                    $(this).animate(
                        {
                            top: `${top - height}px`,
                        },
                        500,
                        () => {
                            top = $(this).position().top;
                            if (top <= height * -1) {
                                $(this).css({ top: `${(list.length - 1) * height}px` });
                            }
                            if (top == 0) {
                                $(this).css({ zIndex: 50 });
                                wrongTop = false;
                            } else {
                                $(this).css({ zIndex: 0 });
                            }
                            if (i === list.length - 1 && wrongTop) {
                                that.clearAllInter();
                                if (list.length > 1) {
                                    that.showScroll();
                                }
                            }
                        }
                    );
                });
        }, speed);
    };

    clickScroll = item => () => {
        const { onClickItem } = this.props;
        $.isFunction(onClickItem) && onClickItem(item);
    };

    render() {
        const { list, className, renderItem } = this.props;
        return (
            <ul
                className={cx(S.scroll, className)}
                ref={c => {
                    this.scroll = c;
                }}
            >
                {list.map(item => (
                    <li className={S.scrollLi} onClick={this.clickScroll(item)}>
                        {renderItem(item)}
                    </li>
                ))}
            </ul>
        );
    }
}
